<template>
  <div class="cancelClassAndEvaluate">
    <!-- 筛选条件区域 -->
    <div class="filter-section">
      <div class="filter-header">
        <div class="filter-title">筛选条件</div>
        <div class="filter-toggle" @click="showFilter = !showFilter">
          {{ showFilter ? '收起' : '展开' }}
          <van-icon :name="showFilter ? 'arrow-up' : 'arrow-down'" />
        </div>
      </div>

      <div class="filter-content" v-show="showFilter">
        <div class="filter-row">
          <div class="filter-item">
            <div class="filter-label">开始时间</div>
            <van-field
              readonly
              v-model="filterForm.startTime"
              placeholder="请选择开始时间"
              @click="showStartTimePicker = true"
              clearable
              class="filter-input"
            />
          </div>

          <div class="filter-item">
            <div class="filter-label">结束时间</div>
            <van-field
              readonly
              v-model="filterForm.endTime"
              placeholder="请选择结束时间"
              @click="showEndTimePicker = true"
              clearable
              class="filter-input"
            />
          </div>

        </div>

        <div class="filter-actions">
          <van-button type="default" size="normal" @click="resetFilter" class="action-btn">重置</van-button>
          <van-button type="primary" size="normal" @click="handleSearch" class="action-btn">搜索</van-button>
        </div>
      </div>
    </div>

    <!-- 开始时间选择器 -->
    <van-popup v-model="showStartTimePicker" position="bottom">
      <van-datetime-picker
        v-model="startTimeValue"
        type="date"
        title="选择开始时间"
        @confirm="onStartTimeConfirm"
        @cancel="showStartTimePicker = false"
      />
    </van-popup>

    <!-- 结束时间选择器 -->
    <van-popup v-model="showEndTimePicker" position="bottom">
      <van-datetime-picker
        v-model="endTimeValue"
        type="date"
        title="选择结束时间"
        @confirm="onEndTimeConfirm"
        @cancel="showEndTimePicker = false"
      />
    </van-popup>
    <!-- 列表区域 -->
    <div class="assets_main">
      <van-list
        v-if="result.length"
        v-model="loading"
        :finished="finished"
        offset="30"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          class="item"
          v-for="(item, index) in result"
          :key="index"
          @click="productDetail(item)"
        >
          <div class="item_wrap">
            <div class="item_wrap_detail">
              <div class="item_wrap_title">{{ item.courseName }}</div>
              <div class="time-info">
                <div class="time-item">
                  <span class="time-label">班级名称：</span>
                  <span class="time-value">{{ item.className }}</span>
                </div>
                <div class="time-item">
                  <span class="time-label">开始时间：</span>
                  <span class="time-value">{{ item.startTime }}</span>
                </div>
                <div class="time-item">
                  <span class="time-label">结束时间：</span>
                  <span class="time-value">{{ item.endTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
      <div class="nodata" v-else>
        <van-empty description="暂无数据哦" />
      </div>
    </div>
  </div>
</template>

<script>
import { Empty, List, Field, Button, Popup, DatetimePicker, Picker, Icon } from 'vant';
const courseType = {
  excellentCourse: '2', // 精品课程
  publicCourse: '0', // 常规课程
  auditionCourse: '1', // 试听课程
}
export default {
  components: {
    [Empty.name]: Empty,
    [List.name]: List,
    [Field.name]: Field,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker,
    [Icon.name]: Icon,
  },
  data() {
    const today = new Date();
    const oneYearAgo = new Date(today);
    oneYearAgo.setFullYear(today.getFullYear() - 1);

    const formatDate = (date) => {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }

    return {
      source: courseType.auditionCourse,
      current: 1,
      size: 10,
      loading: false,
      finished: true,
      result: [],
      // 筛选相关数据
      showFilter: false,
      filterForm: {
        startTime: formatDate(oneYearAgo),
        endTime: formatDate(today)
      },
      showStartTimePicker: false,
      showEndTimePicker: false,
      startTimeValue: oneYearAgo,
      endTimeValue: today
    }
  },
  created() {
    this.getData()
  },
  methods: {
    onLoad() {
      console.log('load')
      this.current = this.current + 1;
      this.getData()
    },
    getData() {
      let params = {
        current: this.current,
        size: this.size,
        ...this.filterForm
      }

      this.$http.getCancelClassList(params).then((res) => {
        let { records, current, pages } = res.data.result
          console.log(res)
          this.result = current > 1 ? [...this.result].concat(records) : records
          if (current >= pages) {
            this.loading = true;
            this.finished = true
          }
          else {
            this.finished = false
            this.loading = false
          }
        })
        .catch((err) => {
          console.log(err, 'err')
          this.$toast(err.data.message)
        })
    },
    // 筛选相关方法
    handleSearch() {
      this.current = 1
      this.result = []
      this.showFilter = false // 搜索后隐藏筛选条件
      this.getData()
    },
    resetFilter() {
      const today = new Date();
      const oneYearAgo = new Date(today);
      oneYearAgo.setFullYear(today.getFullYear() - 1);

      const formatDate = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      }

      this.filterForm = {
        startTime: formatDate(oneYearAgo),
        endTime: formatDate(today)
      }
      this.current = 1
      this.result = []
      this.getData()
    },
    onStartTimeConfirm(value) {
      const formatDate = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      }
      this.filterForm.startTime = formatDate(value)
      this.showStartTimePicker = false
    },
    onEndTimeConfirm(value) {
      const formatDate = (date) => {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      }
      this.filterForm.endTime = formatDate(value)
      this.showEndTimePicker = false
    },
    productDetail(item) {
      this.$router.push({ name: 'cancelClassStudent', params: {
        classId: item.classId,
        courseNumber: item.courseNumber,
        teacherNumber: item.teacherNumber,
        courseStartime: item.startTime,
        counrseEndtime: item.endTime } })
    },
  },
}
</script>

<style lang="scss" scoped>
.cancelClassAndEvaluate {
  color: #333;
  height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;

  // 筛选区域样式 - 移动端优化
  .filter-section {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0;

    .filter-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #f5f5f5;

      .filter-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
      }

      .filter-toggle {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 14px;
        color: #409eff;
        cursor: pointer;
      }
    }

    .filter-content {
      padding: 16px;
      background: #fafafa;

      .filter-row {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 20px;

        .filter-item {
          .filter-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 8px;
            font-weight: 500;
          }

          .filter-input {
            width: 100%;
            background: #fff;
            border-radius: 6px;
            border: 1px solid #e8e8e8;

            ::v-deep .van-field__control {
              font-size: 14px;
              padding: 8px 12px;
            }

            ::v-deep .van-field__body {
              min-height: 40px;
            }
          }

        }
      }

      .filter-actions {
        display: flex;
        gap: 12px;

        .action-btn {
          flex: 1;
          height: 44px;
          border-radius: 8px;
          font-size: 16px;
          font-weight: 500;

          &.van-button--default {
            border: 1px solid #dcdfe6;
            color: #606266;
            background: #fff;
          }

          &.van-button--primary {
            background: linear-gradient(135deg, #409eff, #66b1ff);
            border: none;
            box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
          }
        }
      }
    }
  }

  // 列表区域 - 移动端优化
  .assets_main {
    flex: 1;
    overflow: hidden;
    padding: 0 16px;
    background: #f5f5f5;

    .item {
      margin: 12px 0;
      padding: 16px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
      transition: all 0.2s ease;
      border: 1px solid #f0f0f0;

      &:active {
        background: #f8f9fa;
        transform: scale(0.98);
      }

      .item_wrap {
        .item_wrap_detail {
          .item_wrap_title {
            font-size: 17px;
            font-weight: 600;
            color: #1a1a1a;
            line-height: 1.4;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }


          .time-info {
            .time-item {
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              font-size: 14px;

              .time-label {
                color: #999;
                min-width: 80px;
                font-size: 14px;
              }

              .time-value {
                color: #666;
                font-weight: 500;
                flex: 1;
              }
            }
          }
        }
      }
    }

    .nodata {
      height: 60vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

// 移动端响应式调整
@media (max-width: 768px) {
  .cancelClassAndEvaluate {
    .filter-section {
      .filter-content {
        .filter-actions {
          .action-btn {
            height: 48px;
            font-size: 16px;
          }
        }
      }
    }

    .assets_main {
      padding: 0 12px;

      .item {
        margin: 8px 0;
        padding: 14px;

        .item_wrap {
          .item_wrap_detail {
            .item_wrap_title {
              font-size: 16px;
            }
          }
        }
      }
    }
  }
}
</style>
<style lang="scss">
.cancelClassAndEvaluate {
  .van-list {
    height: 100%;
    overflow: scroll;
  }
  .van-tab {
    font-size: 16px;
  }
}
</style>
